<template>
  <div class="search">
    <i class="iconfont">&#xeb02;</i>
    <input type="text" v-model="search">
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Search',
  data () {
    return {
      search: ''
    }
  },
  methods: {
    ...mapActions({
      handleSearch: 'search'
    })
  },
  watch: {
    search () {
      this.handleSearch(this.search)
    }
  },
  computed: {
    ...mapState([
      'onLineSearch'
    ])
  },
  mounted () {
    this.search = this.onLineSearch
  }
}
</script>

<style lang="stylus" scoped>
  .search
    padding 0 18px
    position relative
    .iconfont
      color #fff
      font-size 20px
      color #ddd
      line-height 34px
      position absolute
      left 24px
    input
      width 100%
      height 32px
      line-height 32px
      border-radius 4px
      border 1px solid #454545
      background-color #26292e
      color #efefef
      padding-left 30px
      box-sizing border-box
    input:focus
      border 1px solid #8CB6C0
      box-shadow -1px -1px 5px 0px #8CB6C0, 1px 1px 5px 0px #8CB6C0
</style>
